<!--
 * @Author: liuyonghu
 * @Date: 2021-12-22 17:00:11
 * @LastEditTime: 2021-12-22 17:11:22
 * @LastEditors: liuyonghu
 * @Description: 
 * @FilePath: /learn-three-js/21-1222/line.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./../three.js"></script>
  </head>
  <body>
    <script>
      var scene = new THREE.Scene();

      //create a blue LineBasicMaterial
      var material = new THREE.LineBasicMaterial({ color: 0x0000ff });

      var geometry = new THREE.BufferGeometry();
      const pointsArray = new Array()
      pointsArray.push(new THREE.Vector3(-10, 0, 0));
      pointsArray.push(new THREE.Vector3(0, 10, 0));
      pointsArray.push(new THREE.Vector3(10, 0, 0));
      geometry.setFromPoints(pointsArray)
      var line = new THREE.Line(geometry, material);
      scene.add(line);

      var point = new THREE.PointLight('#fff');
      point.position.set(500, 200, 300); //点光源位置
      scene.add(point); //点光源添加到场景中
      //环境光
      var ambient = new THREE.AmbientLight('#000');
      scene.add(ambient);

      var width = window.innerWidth; //窗口宽度
      var height = window.innerHeight; //窗口高度
      var k = width / height; //窗口宽高比
      var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      camera.position.set(200, 300, 200); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height); //设置渲染区域尺寸
      renderer.setClearColor('orange', 1); //设置背景颜色
      document.body.appendChild(renderer.domElement);

      renderer.render(scene, camera);
    </script>
  </body>
</html>
